<template>
  <el-table
    :data="userList"
    v-loading="fullscreenLoading"
    stripe
    style="width: 100%"
    :highlight-current-row="false"
    :border="true"
    class="task-list-table"
    header-row-class-name="common-list-table-header taks-list-table-header"
    ref="usersTable"
  >
    <el-table-column prop="seatNo" label="坐席号"></el-table-column>
    <el-table-column label="坐席状态">
      <template slot-scope="scope">
        <span
          v-if="scope.row.statusDescription"
          :class="statusColor[scope.row.statusDescription]"
        >{{ scope.row.statusDescription }}</span
        >
      </template>
    </el-table-column>
    <el-table-column label="绑定账号">
      <template slot-scope="scope">
        <template v-if="isOpenData && scope.row.staffId">
          <open-data type="userName" :openid="scope.row.staffId"></open-data>
        </template>
        <template v-else>
          <span>{{ scope.row.userName }}</span>
        </template>
      </template>
    </el-table-column>
    <el-table-column
      prop="seatAccount"
      label="登录账号"
    ></el-table-column>
    <el-table-column
      prop="seatPassword"
      label="登录密码"
    ></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          type="text"
          v-if="!scope.row.userName"
          class="color-primary"
          href="#"
          @click="bindUser(scope.row)"
        >绑定</el-button
        >
        <el-button
          type="text"
          v-else
          class="color-business"
          href="#"
          @click="unBindUser(scope.row)"
        >解绑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import * as CallCenterApi from '@src/api/CallCenterApi';

export default {
  data() {
    return {
      userList: [],
      fullscreenLoading: false,
      statusColor: {
        在线: 'color-online',
        通话中: 'color-business',
        离线: 'color-outline',
      },
    };
  },
  created() {
    this.getAgentList();
  },
  methods: {
    // 获取坐席列表
    getAgentList() {
      this.fullscreenLoading = true;
      CallCenterApi.getTechList()
        .then(({ code, message, result }) => {
          if (code !== 0) return this.$message.error(message || '内部错误');
          this.userList = result || [];
        })
        .catch(err => {
          console.error(err);
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    },
    // 绑定
    /** 
     * @deprecated
    */
    bindUser(scope) {
      let max = 1;
      let options = {
        title: '请选择人员',
        seeAllOrg: true,
        selected: null,
        showDeleteUser: false,
        max,
      };
      return this.$fast.contact
        .choose('dept', options)
        .then(result => {
          if (result.status == 0) {
            let data = result.data || {};
            let users = data.users || [];
            this.changeTech('lock', {
              id: scope.id,
              userId: users[0].userId,
            }).then(res => {
              if (res.code == 0) {
                scope.userName = users[0].displayName;
                scope.userId = users[0].userId;
                this.$message({
                  message: '绑定成功',
                  type: 'success',
                });
                this.getAgentList();
              } else {
                this.$notify.error({
                  title: '网络错误',
                  message: res.message,
                  duration: 2000,
                });
              }
            });
          }
        })
        .catch(err => console.error(err));
    },
    // 解绑
    unBindUser(data) {
      this.$confirm(
        '解绑后，对应账号无法使用坐席接听和外呼，确认要解绑吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        this.changeTech('unlock', { id: data.id }).then(res => {
          if (res.code == 0) {
            data.userName = '';
            this.$message({
              message: '解绑成功',
              type: 'success',
            });
            this.getAgentList();
          } else {
            this.$notify.error({
              title: '网络错误',
              message: res.message,
              duration: 2000,
            });
          }
        });
      });
    },
    // 修改状态
    changeTech(type, params = {}) {
      if (type == 'lock') {
        return CallCenterApi.lockTech(params);
      } else if (type == 'unlock') {
        return CallCenterApi.unlockTech(params);
      }
    },
  },
};
</script>

<style lang="scss" scope>
.color-online {
  color: $color-primary !important;
}
.color-business {
  color: $color-danger !important;
}
.color-outline {
  color: $text-color-gray;
}
</style>
